<template>
  <div id="plamform-day">
    <div class="table-content scroll-box">
      <tableSearch :searchCol="searchCol">
        <Input v-model="userNo" slot="date"/>

        <div slot="button">
          <div class="actionBox">
            <div>
              <Button size="small" type="primary" @click="postClient">{{
                  $t("views.public.search")
                }}
              </Button>
            </div>
            <div>
              <Button size="small" type="primary" @click="addBanner">创建banner</Button>
            </div>
          </div>
        </div>
      </tableSearch>
      <tableBox :columns="titleList" :list="tablesList" :loading="false">
        <div slot="banner_image" slot-scope="{ item }">
          <img :src="item.banner_image" alt=""/>
        </div>

        <div slot="jump_type" slot-scope="{ item }">
          {{ setType(item.jump_type) }}
        </div>


        <div slot="room_type" slot-scope="{ item }">
          {{ setRoomType(item.jump_type) }}
        </div>


        <div slot="Controls" slot-scope="{ item }">
          <div class="actionBox">

            <div>          <Button size="small" type="primary" @click="addBanner(item)">编辑</Button></div>
            <div>
              <Button size="small" v-if="item.is_on!=1" type="primary" @click="onlineBanner(item.id,1)">上架</Button>
              <Button size="small" v-else type="warning" @click="onlineBanner(item.id,2)">下架</Button>
            </div>
            <div>
              <Button size="small" type="error" @click="onlineBanner(item.id,3)">删除</Button>

            </div>


          </div>

        </div>


      </tableBox>
    </div>

    <Modal
        class="hide-zindex-model"
        v-model="isDate"
        :mask-closable="false"
        :title="
        detail.id
          ? '编辑banner'
          : '新建banner'
      "
    >

      <div class="box_all clear">
        <div class="box_title fl">
          banner主标题
        </div>
        <div class="box_content fl">
          <Input v-model="detail.banner_title"/>
        </div>
      </div>

      <div class="box_all clear">
        <div class="box_title fl">
          banner副标题
        </div>
        <div class="box_content fl">
          <Input v-model="detail.banner_content"/>
        </div>
      </div>


      <div class="box_all clear">
        <div class="box_title fl">
          排序
        </div>
        <div class="box_content fl">
          <Input v-model="detail.sort"/>
        </div>
      </div>


      <div class="box_all clear">
        <div class="box_title fl">
          banner图片
        </div>
        <div class="box_content fl">
          <div>
            <img v-show="banner_image" :src="banner_image" alt="">
          </div>
<!--          <Input v-model="detail.banner_image"/>-->
          <Button size="small" type="primary" @click="shangchang">更换图片</Button>

        </div>
      </div>


      <div class="box_all clear">
        <div class="box_title fl">
          语言
        </div>
        <div class="box_content fl">
          <i-select v-model="detail.language" filterable>
            <i-option
                v-for="(item, index) in languageList"
                :value="item.id"
                :key="index"
            >{{ item.text }}
            </i-option>
          </i-select>
        </div>
      </div>


      <div class="box_all clear">
        <div class="box_title fl">
          跳转的类型
        </div>
        <div class="box_content fl">
          <i-select v-model="detail.jump_type" filterable>
            <i-option
                v-for="(item, index) in jumpTypeList"
                :value="item.id"
                :key="index"
            >{{ item.text }}
            </i-option>
          </i-select>
        </div>
      </div>


      <div class="box_all clear" v-show="detail.jump_type==1">
        <div class="box_title fl">
          跳转的url
        </div>
        <div class="box_content fl">
          <Input v-model="detail.jump_url"/>
        </div>
      </div>


      <div class="box_all clear" v-show="detail.jump_type==2">
        <div class="box_title fl">
          跳转的房间
        </div>
        <div class="box_content fl">
          <Input v-model="detail.room_number"/>
        </div>
      </div>

      <div class="box_all clear" v-show="detail.jump_type==2">
        <div class="box_title fl">
          跳转房间的类型
        </div>
        <div class="box_content fl">
          <i-select v-model="detail.room_type" filterable>
            <i-option
                v-for="(item, index) in typeList"
                :value="item.id"
                :key="index"
            >{{ item.text }}
            </i-option>
          </i-select>
        </div>
      </div>
      <div slot="footer">
        <Button @click="isDate = false" type="text">{{
            $t("views.public.cancel")
          }}</Button>
        <Button @click="operateBanner()" type="primary">{{
            $t("views.public.sure")
          }}</Button>

      </div>

    </Modal>

  </div>
</template>
<script>
import tableBox from "@/components/Table/VueTable.vue";
import tableSearch from "@/components/Table/TableSearch.vue";
import foundDetail from "./components/foundData.vue";

import selectCountryArea from "@/components/selectCountryArea/selectCountryArea.vue";
import until from "@/js/until.js";
import uploadPictures from "@/js/uploadPictures.js";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      titleList: this.getTitleList(),
      searchCol: this.getSearchCol(),
      tablesList: [],
      pn: 1,
      page: 10,
      banner_image:'',
      total: 0,
      countrySelect: 0,
      userNo: "",
      isDate: false,
      itemData: {},
      detail: {},
      jumpTypeList: [
        {
          id: 1,
          text: '跳转url'
        },
        {
          id: 2,
          text: '跳转房间'
        },
      ],
      languageList: [
        {
          id: 'All',
          text: '全部'
        },
        {
          id: 'en',
          text: '英语'
        },
        {
          id: 'ar',
          text: '阿语'
        },
      ],

      typeList: [
        {
          id: 1,
          text: '聊天'
        },
        {
          id: 2,
          text: '游戏'
        },
        {
          id: 3,
          text: '音乐'
        },
      ]
    };
  },
  components: {
    tableSearch,
    tableBox,
    selectCountryArea,
    foundDetail,
  },
  computed: {
    ...mapGetters(["getLocale"]),
  },
  created() {
    this.getList();
  },
  methods: {
    shangchang(){
      uploadPictures.awsUploadImg().then((url)=>{
        this.banner_image  =url;
      })
    },
    setRoomType(type){
      let text = ''
      this.typeList.forEach((item)=>{
        if(item.id==type){
          text  =item.text
        }
      })
      return text
    },
    setType(type) {
      switch (type) {
        case 1:
          return "静态页面";
          break;

        case 2:
          return "房间";
          break;
      }
    },
    getSearchCol() {
      return [
        {
          title: "banner ID",
          key: "date",
        },
      ];
    },
    addBanner(item) {
      if(item){
        this.detail = JSON.parse(JSON.stringify(item));
        this.banner_image = item.banner_image

      }else {
        this.detail={};
        this.banner_image=''
      }
      this.isDate = true;
    },
    getTitleList() {
      return [
        {
          title: "id",
          key: "id",
        },

        {
          title: "banner图片",
          key: "banner_image",
          type: "custom",
        },
        {
          title: "主标题",
          key: "banner_title",
        },
        {
          title: "副标题",
          key: "banner_content",
        },
        {
          title: "语言",
          key: "language",
        },
        {
          title: "跳转的类型",
          key: "jump_type",
          type: "custom",
        },
        {
          title: "跳转的url",
          key: "jump_url",
          // type: 'custom',
        },

        {
          title: "房间号",
          key: "room_number",
          // type: 'custom',
        },

        {
          title: "房间类型",
          key: "room_type",
          type: 'custom',
        },

        {
          title: "操作",
          key: "Controls",
          type: "custom",
        },
      ];
    },
    changeStart(data) {
      this.start_time = data;
    },
    changeEnd(data) {
      this.end_time = data;
    },
    postClient() {
      this.pn = 1;

      this.getList();
    },

    areaChange(data) {
      this.countrySelect = data.value;
    },
    timestampTime(data, hms) {
      return until.timestampTime(data, hms);
    },
    getList(scrollTopFlag) {
      return this.$http
          .bannerList(
              {
                id: this.userNo,
              },
              {
                method: this.getList,
                that: this,
                scrollTopFlag,
              }
          )
          .then((res) => {
            this.tablesList = res.list;
          });
    },
    onlineBanner(id,type){
      this.$modalCon('确认操作？').then((status) => {
        if (status) {
           this.$http
              .onlineBanner(
                  {
                    id:id,
                    type:type
                  },
                  {
                    method: this.onlineBanner,
                    that: this,
                  }
              )
              .then((res) => {
                if(res.code==200){
                  this.getList();
                  this.$Message.info('操作成功');

                }

              });
        }
      })


    },
    operateBanner(scrollTopFlag) {
      this.detail.banner_image=this.banner_image
      return this.$http
          .operateBanner(
              this.detail,
              {
                method: this.operateBanner,
                that: this,
                scrollTopFlag,
              }
          )
          .then((res) => {
            if(res.code==200){
              this.getList();
              this.$Message.info('修改成功');

              this.isDate=false;
            }

          });
    },
    getTimestamp(time, type) {
      if (typeof time === "object") return parseInt(time.getTime());
      else return parseInt(until.dataToTimestamp(time, type) / 1000);
    },
    changePage(pn) {
      this.pn = pn;
      this.getList(pn, true);
    },

  },
  watch: {
    getLocale: function () {
      this.searchCol = this.getSearchCol();
      this.titleList = this.getTitleList();
    },
  },
};
</script>
<style lang="scss" scoped>
#plamform-day {
  .recharge-detail {
    white-space: nowrap;
  }

  .search-title {
    color: red;
    display: inline-block;
  }
}
</style>
